<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>flex主轴方向flex-direction+对齐justify-content+居中方式align-items</title>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .block-or-flex{
        width: 100%;
        height: 200px;
        background-color: #eee;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        /* 控制子元素垂直方向的对齐方式：自动伸缩填充 */
        align-items: stretch;
    }
    .item {
        background-color: red;
        color: #fff;
        padding: 5px 10px;
    }
    .item2 {
        background-color: green;
        font-size: 12px;
    }
    .item3 {
        font-weight: bold;
        font-size: 20px;
    }
    form {
        margin-top: 20px;
    }
    label {
        margin-right: 20px;
    }
</style>
</head>

<body>
    <div class="block-or-flex">
        <div class="item">你好，</div>
        <div class="item item2">欢迎</div>
        <div class="item">来到</div>
        <div class="item item3">flex 世界</div>
    </div>
    <form>
        <label for="display">
            flex主轴方向
            <select id="display">
                <option value="row">row</option>
                <option value="column">column</option>
            </select>
        </label>
        <label for="justifyContent">
            justify-content 沿主轴的对齐方式
            <select id="justifyContent">
                <option value="flex-start">flex-start左or上对齐</option>
                <option value="center">center居中对齐</option>
                <option value="flex-end">flex-end右or下对齐</option>
                <option value="space-between">space-between左右上下贴边，剩余内容间距对齐</option>
                <option value="space-around">space-around间距对齐</option>
                <option value="space-evenly">space-evenly等间距均匀分布</option>
            </select>
        </label>
        <label for="alignItems">
            align-items 和主轴垂直的方向对齐方式
            <select id="alignItems">
                <option value="stretch">stretch拉伸</option>
                <option value="flex-start">flex-start左or上对齐</option>
                <option value="center">center居中对齐</option>
                <option value="flex-end">flex-end右or下对齐</option>
                <option value="baseline">baseline基线对齐（所有快下边对齐）</option>
            </select>
        </label>
    </form>

<script>
    const blockOrFlex = document.querySelector('.block-or-flex');
    const display = document.querySelector('#display');
    const justifyContent = document.querySelector('#justifyContent');
    const alignItems = document.querySelector('#alignItems');
    display.addEventListener('change', function () {
        blockOrFlex.style.flexDirection = this.value;
    })
    justifyContent.addEventListener('change', function () {
        blockOrFlex.style.justifyContent = this.value;
    })
    alignItems.addEventListener('change', function () {
        blockOrFlex.style.alignItems = this.value;
    })
</script>
</body>
</html>